// 一.  获取分类  展示
function load_cates() {
  mg_getCategory(res => {
    let list = res.data.data

    list.forEach(v => {
      var theOption = `<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
      $('select[name=cate_id]').append(theOption)
    })
    // 更新 lay-filter='edit' 里面的 所有 的 select
    layui.form.render('select', 'edit')
  })

  // axios
  //   .get('http://api-breakingnews-web.itheima.net/my/article/cates', {
  //     headers: {
  //       Authorization: localStorage.getItem('token'),
  //     },
  //   })
  //   .then(res => {
  //     console.log('分类:', res.data.data)
  //     let list = res.data.data

  //     list.forEach(v => {
  //       var theOption = `<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
  //       $('select[name=cate_id]').append(theOption)
  //     })
  //     // 更新 lay-filter='edit' 里面的 所有 的 select
  //     layui.form.render('select', 'edit')
  //   })
}

load_cates()

// 二. 集成富文本编辑器
initEditor()

// 三. 裁剪工具
// 1. 初始化
let cropper
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image') // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $('.img-preview'),
  })
}
initCropper()
// 2. 点击选择图片
$('.select').on('click', () => {
  $('input[type=file]').click()
})
// 3. 监听change事件 获取图片 => url => 显示
$('input[type=file]').on('change', e => {
  //3.1 获取图片对象
  let file = e.target.files[0]
  //3.2 转化为url
  let url = URL.createObjectURL(file)
  //3.3 显示
  cropper.replace(url)
})

// 四. 点击确认添加
$('.layui-form').on('submit', e => {
  //1. 阻止默认行为
  e.preventDefault()

  //2. 收集值
  // 2.1 收集了标题 + 分类 + 内容 + 状态
  //          正常    id    ''     正常
  let fd = new FormData($('.layui-form')[0])

  //2.2 修改富文本的内容
  // 如果fd 是一个对象
  // fd.append(k,v) => 增加/追加   0 => 1
  // fd.set(k,v)    => 设置/修改   1 => 1
  let htmlStr = tinyMCE.activeEditor.getContent()
  fd.set('content', htmlStr)

  // 2.3 收集 图片的blob 二进制流格式化
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })

  canvas.toBlob(function (blobObj) {
    console.log('blobObj:', blobObj)

    fd.append('cover_img', blobObj)

    // FormData
    // fd.forEach((v, k) => {
    //   console.log('fd:', k, v)
    // })

    //3. 发送请求
    axios
      .post('http://api-breakingnews-web.itheima.net/my/article/add', fd, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('发布文章:', res.data)
        if (res.data.status === 0) {
          layer.msg('发布文章成功', { icon: 1 })
        }
      })
  })
})

/**
  记住

  1. FormData => 后台需要这种格式
  2. let fd = new FormData()
  3. let fd = new FormData(form)  => 自动把表单( name , value )里面的表单值 包含进去 => fd
  4. 添加 fd.append(k,v) => 0 => 1
  5. 修改 fd.set(k,v)    => 1 => 1
  6. 打印 fd.forEach((v,k) => ...)
  7. 如果忘了, 打开MDN => formdata
  */
